<script setup>
import dayjs from 'dayjs';
import { RefreshRight } from '@element-plus/icons-vue';

import SubViewContainer from '@core/components/subLayout/SubViewContainer.vue';
import Validator from '@userManagement/utils/Validator';

const { t } = useI18n({ inheritLocale: true, useScope: 'local' });

const userOfMine = reactive({
  userName: 'developer',
  userId: '1',
  authRoles: [{ roleId: 100, roleName: 'admin' }],
  createTime: dayjs().format(t('datetimeFormatter')),
});

const isResetPasswordDialogShown = ref(false);
const resetPasswordModel = reactive({
  old: '',
  new: '',
  recheckNew: '',
});
const validatePassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error(t('inputPasswordPlease')));
    return;
  }
  if (!Validator.checkPassword(value)) {
    callback(new Error(t('ensurePasswordPlease', { chars: Validator.specialChars })));
    return;
  }
  callback();
};
const validatePasswordRecheck = (rule, value, callback) => {
  if (value === '') {
    callback(new Error(t('inputPasswordPlease')));
    return;
  }
  if (value !== resetPasswordModel.new) {
    callback(new Error(t('ensureRecheckPasswordPlease')));
    return;
  }
  callback();
};
const resetPasswordRules = {
  old: [{ required: true, message: t('inputPasswordPlease'), trigger: 'blur' }],
  new: [{ required: true, validator: validatePassword, trigger: 'blur' }],
  recheckNew: [{ required: true, validator: validatePasswordRecheck, trigger: 'blur' }],
};

</script>

<template>
  <SubViewContainer>
    <ElCard class="container-card">
      <ElDescriptions :column="3" border>
        <ElDescriptionsItem :label="t('userId')">{{userOfMine.userId}}</ElDescriptionsItem>
        <ElDescriptionsItem :label="t('username')">{{userOfMine.userName}}</ElDescriptionsItem>
        <ElDescriptionsItem :label="t('createdAt')">{{userOfMine.createTime}}</ElDescriptionsItem>
        <ElDescriptionsItem :label="t('roles')">
          <ElTag
              v-for="authRole in userOfMine.authRoles"
              :key="authRole.roleId"
            >
              {{authRole.roleName}}
            </ElTag>
        </ElDescriptionsItem>
      </ElDescriptions>
    </ElCard>
    <ElCard class="container-card">
      <template #header><div class="card-header">{{t('accountSecurity')}}</div></template>
      <template #default>
        <ElButton
          type="primary"
          class="button-with-icon"
          :icon="RefreshRight"
          @click="isResetPasswordDialogShown = true"
        >
          {{t('resetPassword')}}
        </ElButton>
      </template>
    </ElCard>
    <ElDialog
      v-model="isResetPasswordDialogShown"
      :title="t('resetPassword')"
      width="35%"
    >
      <ElForm
        ref="resetPasswordFormRef"
        :rules="resetPasswordRules"
        :model="resetPasswordModel"
        label-position="right"
        label-width="88px"
        class="reset-password-form"
      >
        <ElFormItem :label="t('oldPassword')" prop="old">
          <ElInput v-model="resetPasswordModel.old" type="password" show-password />
        </ElFormItem>
        <ElFormItem :label="t('newPassword')" prop="new">
          <ElInput v-model="resetPasswordModel.new" type="password" show-password />
        </ElFormItem>
        <ElFormItem :label="t('recheckNewPassword')" prop="recheckNew">
          <ElInput v-model="resetPasswordModel.recheckNew" type="password" show-password />
        </ElFormItem>
      </ElForm>
      <template #footer>
        <ElButton @click="isEditDialogShown = false">{{t('cancel')}}</ElButton>
        <ElButton
          :loading="isPasswordResetting"
          type="primary"
          @click="onSubmitResetPassword(resetPasswordFormRef)"
        >
          {{t('submit')}}
        </ElButton>
      </template>
    </ElDialog>
  </SubViewContainer>
</template>

<i18n lang="yaml" locale="zh-CN">
  userId: '用户 ID'
  username: '用户名'
  createdAt: '创建时间'
  roles: '角色'
  accountSecurity: '账号安全'
  resetPassword: '重置密码'
  datetimeFormatter: 'YYYY-MM-DD HH:mm:ss'
  oldPassword: '旧密码'
  newPassword: '新密码'
  recheckNewPassword: '确认密码'
  inputPasswordPlease: '请输入密码'
  ensurePasswordPlease: '密码应当大于8位，且包含数字、大写字母、小写字母和特殊符号（{chars}）'
  ensureRecheckPasswordPlease: '两次输入的密码不一致'
  cancel: '取消'
  submit: '提交'
</i18n>

<style lang="scss" scoped>
.card-header {
  display: inline-block;
  padding-left: 8px;
  font-size: 14px;
  line-height: 1;
  border-left: 2px solid rgb(61 115 245);
}

.container-card {
  margin-bottom: 16px;
}

.button-with-icon {
  line-height: 1.2;
}
</style>
